<template>
  <div class="pvc-box">
    <Form :model="pvcForm" ref="pvcForm" :rules="pvcRules" :label-width="100" label-position="left">
      <FormItem label="存储卷">
        <dropdown-add v-model="pvcName" placeholder="请选择存储卷" buttonText="新增存储卷" :list="pvcList" @on-add="pvcAdd" @on-blur="updateBlur" ></dropdown-add>
      </FormItem>
      <FormItem label="挂载路径" prop="mountPath">
        <Input v-model.trim="pvcForm.mountPath" placeholder="例如：/var/run/secrets/kubernetes.io/serviceaccount" @on-blur="updateBlur"></Input>
      </FormItem>
    </Form>

    <pvc-add :visible.sync="pvcVisible" @finish="pvcAddFinish" ></pvc-add>
  </div>
</template>
<script type="text/javascript">
import DropdownAdd from '@/components/dropdown-add'
import Fetch from '@/api/request'
import PvcAdd from '@/components/pvc/add-modify-model'

export default {
  name: 'Pvc',
  components: { DropdownAdd, PvcAdd },
  data() {
    const validateLength = (rule, value, callback) => {
      if (value && value.length > 128) {
        callback(new Error('最大长度不能大于128位'))
      } else {
        callback()
      }
    }
    return {
      pvcNameList: [{
        id: '1',
        name: 'name'
      }],
      pvcRules: {
        mountPath: [{required: false, trigger: 'blur', validator: validateLength}]
      },
      pvcName: '',
      pvcList: [],
      pvcVisible: false
    }
  },
  props: {
    pvcForm: {
      type: Object,
      default: {
        pvcName: '',
        mountPath: ''
      }
    }
  },
  mounted() {
    this.pvcName = this.pvcForm.pvcName
    this.getPvcList()
  },
  methods: {
    // 配置集新增完成
    pvcAddFinish(val) {
      this.pvcName = val
      this.$emit('update:configForm', {
        pvcName: val,
        mountPath: this.pvcForm.mountPath
      })
      this.getPvcList()
    },
    // 新增存储卷
    pvcAdd() {
      this.pvcVisible = true
    },
    // 获取存储卷列表
    getPvcList() {
      Fetch.get({
        url: '/api/environments/' + this.$route.params.environmentId + '/persistentvolumeclaims'
      }).then((res) => {
        if (res && res.code === '0') {
          let temp = []
          res.data.forEach(e => {
            // 过滤正在删除的存储卷
            if (e.phaseStatus !== 'Terminating') {
              temp.push({
                id: e.id,
                name: e.id
              })
            }
          })
          this.pvcList = temp
        } else {
          this.$Message.warning({
            content: res.message || '服务器内部错误',
            duration: this.DURATION
          })
        }
      }).catch((err) => {
        this.$Message.error(err.message)
      })
    },
    // blur更新父级数据
    updateBlur() {
      this.$refs['pvcForm'].validate((valid) => {
        if (valid) {
          this.$emit('update:pvcForm', {
            pvcName: this.pvcName,
            mountPath: this.pvcForm.mountPath
          })
        } else {
          this.$emit('update:pvcForm', {
            pvcName: this.pvcName,
            mountPath: ''
          })
        }
      })
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.pvc-box {
  div.ivu-form-item {
    margin-bottom: 8px;
  }
}
</style>
